<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超市狂欢购</title>
    <script>
        document.querySelector('html').style.fontSize = 812 / 10 + 'px';
    </script>
    <link rel="stylesheet" href="../style/base_zt.css">
    <link rel="stylesheet" href="../style/supermarket_scss/index-qcwd.css">
</head>

<body>
    <div class="main-wrap">
        <div class="spree-top">
            <div></div>
        </div>
        <div class="wrapper">
            <!-- 99元区 -->
            <div class="price-top mt">
                <div class="price-top-title bp-99"></div>
                <div class="price-top-body price-top-body-99">
                </div>
            </div>
            <!-- 日化母婴 -->
            <div class="header">
                <div class="h-title"></div>
            </div>
            <div class="price-top pt-0">
                <ul class="supermarket-tab infant-mom">
                    <li class="supermarket-tab-curr">18.9元专区</li>
                    <li>29元专区</li>
                    <li>59元专区</li>
                </ul>
                <div class="price-top-body price-top-body-mom">
                </div>
            </div>
            <div class="header">
                <div class="h-title h-title-b"></div>
            </div>
            <div class="price-top pt-0">
                <ul class="supermarket-tab home-design">
                    <li class="supermarket-tab-curr">49元专区</li>
                    <li>89元专区</li>
                    <li>199元专区</li>
                </ul>
                <div class="price-top-body price-top-body-home">
                </div>
            </div>
    
            <div class="scroll-top"></div>
        </div>
        </div>
    </div>
    <!-- 商品卡片模板 start -->
    <script type="text/html" id="card-template">
        {{each $data}}
        <div class="price-card">
            <a href="javascript:;" class='C_J_good' data-id='{{$value.id}}'>
                <img src="{{$value.pic}}" alt="">
                <span>{{$value.name}}</span>
            </a>
            <div>
                <div>
                    <div class="price-card-price ib">
                        <div>原价￥
                            <span>{{$value.price_on_tag}}</span>
                        </div>
                        <div>一口价：￥</div>
                    </div>
                    <div class="ib price-card-num">{{$value.discountPrice}}</div>
                </div>
                <span></span>
                <a href="javascript:;" class='C_J_good' data-id='{{$value.id}}'>
                    <div class="order-now">
                        <div>立即</div>
                        <div>抢购</div>
                    </div>
                </a>
            </div>
        </div>
        {{/each}}
    </script>
    <!-- 商品卡片模板 end -->

</body>
<script src="../../js/jquery-1.8.3.min.js"></script>
<script src="../../js/art-template.js"></script>
<script src="../../js/login.js"></script>
<script src="../../js/model.js"></script>
<script src="../../js/model-citizen.js"></script>
<script>
    /* by Jsung */
    var info = [
        [
            [113317, 142354, 138970, 125544, 135091, 141718]
        ],
        [
            [41073, 60628, 123542, 95431, 125001, 142638],
            [131169, 84343, 73891, 35316, 99486, 142553],
            [73903, 131621, 131302, 123538, 142830, 138613]
        ],
        [
            [123875, 129126, 128206, 140943, 107494, 146564],
            [140179, 106872, 112163, 124162, 141299, 125148],
            [121600, 131752, 135017, 131922, 138501, 119202]
        ]
    ];

    (function ($, template, info) {
        init(info)

        function init(info) {
            templateRender(info[0][0], $('.price-top-body-99'))
            templateRender(info[1][0], $('.price-top-body-mom'))
            templateRender(info[2][0], $('.price-top-body-home'))
        }

        function getData(id, container) {
            $.ajax({
                url: 'http://www.cjwsc.com/qcwdProduct/getProductByIds',
                data: {
                    ids: id,
                    business_type: 10,
                    client_type: 1
                },
                dataType: "jsonp",
                jsonp: 'jsonpcallback',
                success: function (res) {
                    if (res.error) {
                        console.log(res.error);
                        return
                    }
                    res.msg[0].href = 'http://www.cjwsc.com/item/' + id + '.html';
                    res.msg[0].pic = res.msg[0].pic.replace('240_240','800_800');
                    container.append(template('card-template', res.msg))
                }
            })
        }

        function templateRender(_id, container) {
            // 请求并渲染数据
            _id.forEach(function (v) {
                getData(v, container)
            });
        }

        // 超市狂欢购 tab 栏切换
        $('.infant-mom').on('click', 'li', function () {
            var $this = $(this),
                container = $('.price-top-body-mom');
            $this.addClass('supermarket-tab-curr').siblings().removeClass('supermarket-tab-curr')
            container.html('')
            templateRender(info[1][$this.index()], container)
        })
        $('.home-design').on('click', 'li', function () {
            var $this = $(this),
                container = $('.price-top-body-home');
            $this.addClass('supermarket-tab-curr').siblings().removeClass('supermarket-tab-curr')
            container.html('')
            templateRender(info[2][$this.index()], container)
        })
        // 返回顶部按钮
        $('.scroll-top').on('click', function () {
            $('html,body').animate({
                scrollTop: 0
            }, 500)
        })

    })($, template, info);
</script>

</html>